<script setup>
    import { ref } from "vue";
    import { store, loginOpen } from '../js/store.js';
	import mycheckbox from "../components/checkbox.vue";//组件插槽
    import customSelect from '../components/customselect.vue';//封装的element选择器

    defineProps({
        hashName: String,
    });

    function init() {
        console.log('init');
        if(!loginOpen.getUser()){
            loginOpen.popup = true;
        }
    }
    init()
    //组件暴露自己的属性
    // defineExpose({
    //     init,
    // });

    //组件插槽TEST
	const checked = ref(true);
    const checkboxtitle = ref('checkbox title')
    function onchecked() {
        console.log('checked..', checked.value);
        checkboxtitle.value='响应新值：'+checked.value
    }
    function oncomp() {
        // location.hash = '#/me/checked';//两种方式都可以
        location.hash = '#/checked';
    }

	const checkedShow = ref(false);
    store.pageRouter.route("checked", function () {
		checkedShow.value = true;
	},function () {
		checkedShow.value = false;
	});
    store.pageRouter.routes['checked'].sub = true;//打开checked，已打开的页面不退出

    //封装的element选择器
    const selectedOption = ref('');
    const options = [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        // ...
    ];
    function onselect() {
        console.log('selectedOption', selectedOption.value);
    }
</script>

<template>

<div class="wrapper">
    <el-form-item label="用户名" color="success">
        <el-input v-model="loginOpen.user.name"></el-input>
    </el-form-item>
    <el-form-item label="角色" color="success">
        <el-input v-model="loginOpen.user.role"></el-input>
    </el-form-item>
    <el-form-item label="电话" color="success">
        <el-input v-model="loginOpen.user.phone"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" color="success">
        <el-input v-model="loginOpen.user.email"></el-input>
    </el-form-item>
    <el-form-item label="插槽test" color="success">
        <button @click="oncomp">组件插槽</button>
        <mycheckbox v-model="checked" :title="checkboxtitle" @change="onchecked" v-if="checkedShow"><template v-slot:aaa="{ text }">复选框 {{text}}</template></mycheckbox>
        <!-- 插槽可简写成 #aaa="{text}" 未命名插槽默认是 #default 不传参可无需template节点 -->
    </el-form-item>
    <el-form-item label="选择器" color="success">
        <customSelect v-model="selectedOption" :options="options" theme="dark" @change="onselect">
            <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> -->
        </customSelect>
    </el-form-item>
    <el-form-item label="重新登陆" color="success">
        <el-button type="primary" @click="loginOpen.popup = true">重新登陆</el-button>
    </el-form-item>
</div>


</template>

<style scoped>

</style>